<template>
  <view class="container">
    <u-navbar
      :background="background"
      backIconColor="#fff"
      title-size="36"
      title="兑换投入"
      height="50"
      :is-back="true"
      :border-bottom="false"
      title-color="#fff"
    >
    </u-navbar>
    <view class="box" v-if="setting">
      <view
        class="item dis-flex flex-y-between"
        v-for="(item, index) in setting.cryptocurrencyIncrementPresetAmounts"
        :key="index"
      >
        <view class="item-left dis-flex">
          <u-icon name="/static/alliance/lmdnl.png" size="56"></u-icon>
          <view class="item-con">
            <!-- <view class="name">投入能量({{item}})</view> -->
            <view class="des"
              >总奖励：<text class="num">{{
                ((item * setting.cryptocurrencyIncrementPercent) / 100).toFixed(0)
              }}</text
              >联盟豆
            </view>
            <view class="des"
              >所需联盟豆：<text class="num">{{ item }}</text
              >联盟豆</view
            >
            <view class="des"
              >VIP签到周期：<text class="num">{{ setting.cryptocurrencyIncrementDays }}</text
              >天</view
            >
            <!-- <view class="des">普通签到周期：<text class="num">60</text>天</view> -->
          </view>
        </view>
        <view class="item-right dis-flex">
          <!-- <view class="num">+2.0活跃值 </view> -->
          <!-- <view class="bt" v-if="index == 0" @click="routeTo('/alliance/invest-succes')">去兑换</view> -->
          <view class="bt" @click="toDuihuan(item)">去兑换</view>
        </view>
      </view>
    </view>
    <u-gap height="20"></u-gap>
    <!-- <u-mask :show="showTishiModel" @click="showTishiModel = false" z-index="1007"></u-mask> -->
    <u-popup mode="center" v-model="showTishiModel" width="600" border-radius="20">
      <view class="center-box" @tap.stop.prevent @touchmove.stop.prevent>
        <view class="tl">温馨提示</view>
        <view class="content">
          {{ tips }}
        </view>
        <view class="bt" @click="showTishiModel = false">确定</view>
        <u-icon class="uion" name="close" color="#FFFFFF" @click="showTishiModel = false"></u-icon>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showTishiModel: false,
      background: {
        background: '#10A28F'
      },
      list: [{}, {}, {}, {}, {}],
      setting: null,
      tips: ''
    }
  },
  onLoad() {
    this.$u.get('/app-api/member/digital-assets/cryptocurrency/overview').then((res) => {
      this.setting = res.data
    })
  },
  methods: {
    routeTo(url) {
      this.$utils.route(url)
    },
    toDuihuan(item) {
      this.$u
        .post('/app-api/member/digital-assets/cryptocurrency/origin-to-increment', {
          amount: item
        })
        .then((res) => {
          if (res.code === 0) {
            this.routeTo('/alliance/invest-succes')
          } else {
            this.tips = res.msg
            this.showTishiModel = true
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #10a28f;
  min-height: 100vh;
}
.box {
  width: 710rpx;
  // height: 1440rpx;
  background: #cef5f0;
  border-radius: 10rpx;
  margin: auto;
  margin-top: 30rpx;
  padding: 30rpx;
  // min-height: 100vh;
  .item {
    width: 650rpx;
    // height: 250rpx;
    background: #e8fffc;
    box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(153, 153, 153, 0.1);
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;
    .num {
      font-size: 24rpx;
      color: #ff6f10;
    }
    .item-left {
      align-items: flex-start;
      .item-con {
        margin-left: 20rpx;
        .name {
          font-weight: 600;
          font-size: 32rpx;
          color: #10a28f;
          margin-bottom: 10rpx;
        }
        .des {
          font-size: 24rpx;
          color: #10a28f;
          line-height: 40rpx;
        }
      }
    }
    .item-right {
      flex-flow: column;
      align-items: flex-end;
      .bt {
        width: 96rpx;
        height: 50rpx;
        background: #10a28f;
        border-radius: 25rpx;
        font-size: 24rpx;
        color: #ffffff;
        line-height: 50rpx;
        text-align: center;
        margin-top: 20rpx;
      }
    }
  }
}
.center-box {
  width: 600rpx;
  height: 450rpx;
  background: #ffffff;
  border-radius: 20rpx;
  // position: absolute;
  // z-index: 9999;
  // top: 30vh;
  // left: 75rpx;
  padding: 60rpx 45rpx 30rpx 45rpx;
  .tl {
    font-size: 36rpx;
    text-align: center;
  }
  .content {
    margin-top: 48rpx;
    font-size: 30rpx;
    color: #333333;
    text-align: center;
  }
  .bt {
    width: 280rpx;
    height: 80rpx;
    background: #10a28f;
    border-radius: 40rpx;
    margin: auto;
    margin-top: 80rpx;
    font-size: 32rpx;
    color: #ffffff;
    text-align: center;
    line-height: 80rpx;
  }
  .uion {
    margin: auto;
    margin-top: 115rpx;
    width: 64rpx;
    height: 64rpx;
    border: 4rpx solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
